<script setup>
import {ref, watch, onMounted, computed} from 'vue'

import {useAdminStore} from "@/stores/AdminStores.js";
import {storeToRefs} from "pinia";


const userTimetableList = ref([])

const adminStore = useAdminStore()
const {TimetableList} = storeToRefs(adminStore)
const {getUserTableStore, deleteUserTableStore} = adminStore


const props = defineProps(['keyProps'])
const key = ref('')
watch(props, (val) => {
  key.value = val.keyProps
  console.log(key.value)
})
onMounted(() => {
  key.value = props.keyProps
  getUserTableStore(key.value, () => {
    userTimetableList.value = TimetableList.value
  })
})

const classHour = ['第一、二节课', '第三、四节课', '第五、六节课', '第七、八节课', '第九、十节课'];

const columns = ["课程表", "星期一", "星期二", "星期三", "星期四", "星期五"].map((label, idx) => ({
  label,
  prop: label,
  width: !idx ? 150 : void 0
}))


const data = computed(() => {
  return (userTimetableList.value ?? []).map((item) => {
    return {
      'name': item.name,
      'submitId': item.submitId,
      // 'table': item.table,
      'table': computed(() => {
        return (item.table ?? []).map((item, index) => {
          return {
            '课程表': classHour[index],
            '星期一': item[0],
            '星期二': item[1],
            '星期三': item[2],
            '星期四': item[3],
            '星期五': item[4]
          }
        })
      }),
      'del': item.submitId
    }
  })
})

const deleteUserTable = (submitId) => {
  deleteUserTableStore(key.value, submitId, () => {
    getUserTableStore(key.value, () => {
      userTimetableList.value = TimetableList.value
    })
  })
}

const showTimetable = ref(false)


</script>

<template>
  <el-switch
      v-model="showTimetable"
      class="mb-2"
      inline-prompt
      size="large"
      style="--el-switch-on-color: #409eff; --el-switch-off-color: #a3a3a3; margin-right: 20px"
      :active-action-icon="View"
      :inactive-action-icon="Hide"
      active-text="查看课程表提交情况"
      inactive-text="隐藏课程表提交情况"
  />
  <template v-if="showTimetable">
    <div>
      <h3>值班表成员表格（所有上传过课表的成员）</h3>
      <el-table :data="data" border stripe>
        <el-table-column type="expand">
          <template #default="scope">
            <el-table :data="scope.row.table" border stripe v-if="!!scope.row.table">
              <template v-for="(item) in columns" :key="item.label">
                <el-table-column align="center" :label="item.label" :prop="item.prop" :width="item.width">
                  <template #default="{ row }">
                    <template v-if="item.prop !== columns[0].prop">
                      <span>{{ row[item.prop] }}</span>
                    </template>
                    <template v-else>
                      {{ row[item.prop] }}
                    </template>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="submitId" label="提交码"></el-table-column>
        <el-table-column prop="del" label="删除">
          <template #default="row">
            <el-button type="danger" @click="deleteUserTable(row.row.del)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>

</template>

<style scoped>

</style>